import React,{memo} from 'react'
import { withRouter } from 'react-router-dom'

import {
  ThemeTitleWrap
} from './style'

const ThemeTitle = memo(function(props) {
  const {
    title = '',
    isRecommend = false,
    options = [],
    url = ''
  } = props

  const goToNewPosition = () => {
    props.history.push(url)
  }

  // console.log(isRecommend)

  return (
    <ThemeTitleWrap>
      <div className="left">
        <a href="/" className="sprite_02 titleImg"> </a>
        <h2 onClick={() => goToNewPosition()}>{title}</h2>
        <ul className="title-list">
          {
            options.length > 0 && options.map((i,idx) => {
              return (
                <li key={i} className="list-item">
                  <span className="title">{i}</span>
                  {idx !== options.length - 1 && <span className="divider">|</span>}
                </li>
              )
            })
          }
        </ul>
      </div>
      <div className="right">
        {isRecommend && <span>更多<i className="sprite_02 more" /></span>}
      </div>
    </ThemeTitleWrap>
  )
})

export default withRouter(ThemeTitle)
